<template>
	<!--  v-if="dataList.length" -->
	<view class="diy-seckill" :style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }"> 
		<template v-if="dataList.length > 0 && value.style == 3">
			<view class="marketing-wrap marketing-wrap-two" :class="'marketing-wrap-'+ value.style">
				<view class="marketimg-box"> 
					<view class="marketimg-box-title marketimg-box-title-3" v-if="value.style == 3">
						<view class="marketimg-box-title-left">
							<template v-for="(item, index) in value.list" v-if="item.style == 3">
								<image :src="$util.img(item.imageUrl)"></image>
							</template> 
						</view>
					</view>

					<view class="marketimg-box-con">
						<view class="marketimg-box-con-item" v-for="(dataItem, i) in dataList" :key="i" @click="toDetail(dataItem.topic_id, dataItem.topic_name)">
							<view class="wrap">
								<view class="img-box">
									<image :src="$util.img(dataItem.topic_adv)" @error="imageError(i)"></image>
									<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(i)"></image> -->
								</view>
								<view class="content">
									<view class="top">
										<view class="title">{{ dataItem.topic_name }}</view> 
									</view> 
									<view class="bot">
										<view class="price-box"> 
											<text class="seckill-price">活动时间：{{ dataItem.start_time }}~{{ dataItem.end_time }}</text> 
										</view> 
									</view>
									<view class="bot"> 
										<button class="btn color-base-bg">进行中</button>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="marketimg-box-title-right" @click="toMore()" v-if="value.style == 3">
						<text>更多专题</text>
						<text class="iconfont iconright"></text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		name: 'diy-speicel',
		props: {
			value: {
				type: Object
			},
			title:{
				type:String,
				default() {
					return '';
				}
			}
		},
		mixins: [globalConfig],
		data() {
			return {
				seckillId: 0,
				seckillIndex: null, //选中时间块的index
				index: null, //当前正在抢购的index,
				timeList: [],
				dataList: [],
				isNow: false,
				seckillH: '',
				seckillI: '',
				seckillS: '',
				seckillName: '',
				current: 0, //当前的swiper
				seckillInterval: null
			};
		},
		created() {
			console.log(this.title);
			this.getDataList(); 
		}, 
		methods: {
			changeCurrent(e) {
				this.current = e.detail.current;
			},
			//时间转换
			transformSeckillTime(time) {
				time = parseFloat(time);
				var hour = parseInt(time / 3600);
				var minute = parseInt((time % 3600) / 60);
				var second = parseInt(time % 60);

				if (hour < 10) hour = '0' + hour;
				if (minute < 10) minute = '0' + minute;
				if (second < 10) second = '0' + second;

				return hour + ':' + minute;
			},
			goodsImg(imgStr) {
				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			}, 
			getDataList() {
				var page_size = 10;
				if (this.value.style == 3) {
					page_size = this.value.goodsCount;
				} 
				this.$api.sendRequest({
					url: '/topic/api/topic/page',
					data: {
						page:1,
						page_size: page_size
					},
					success: res => {
						console.log(res);
						var data = res.data;
						if (data.list) {
							this.dataList = data.list;
							this.dataList.forEach(i => {
								i.start_time = this.$util.timeStampTurnTime(i.start_time).slice(0, 10);
								i.end_time = this.$util.timeStampTurnTime(i.end_time).slice(0, 10);
							});
						}
					}
				});
			}, 
			toMore() {
				this.$util.redirectTo('/promotionpages/topics/list/list?title='+this.title);
			},
			toDetail(e, f) {
				this.$util.redirectTo('/promotionpages/topics/detail/detail', {
					topic_id: e,
					title: f,
					isVip:this.title
				});
			},
			imageError(index) {
				this.dataList[index].topic_adv = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			}
		},
		onPageHide() {
			clearInterval(this.seckillInterval);
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/components/diy-speicel/diy-speicel.scss';
	
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/ .empty {
		height: 332rpx;
	}
</style>
